feat(@aws-amplify/ui-components): Add ChatBot Component by wlee221 · Pull Request #6563 · aws-amplify/amplify-js

wlee221 · 2020-08-12T21:20:34Z

Issue #, if available:

Description of changes: This PR adds amplify-chatbot as part of the Amplify UI Component redesign.

Features:

Add audioRecorder module for recording / encoding / playing audio and silence detection
Implement state logic and send text / voice message with Interactions.send
Add lex response waiting / listening animation
Error handling with amplify-toast

Customization:

Add slot for chatbot header
Expose css variables for customization

Previous Components Improvements:

Add icon variant to amplify-button
Expose additional css variables in amplify-button, amplify-icon, and amplify-input.
Add microphone and send icon SVG to amplify-icon.
Remove span inside amplify-icon.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

codecov · 2020-08-12T21:45:08Z

Codecov Report

Merging #6563 into ui-components/main will not change coverage.
The diff coverage is n/a.

@@                 Coverage Diff                 @@
##           ui-components/main    #6563   +/-   ##
===================================================
  Coverage               73.30%   73.30%           
===================================================
  Files                     208      208           
  Lines                   12928    12928           
  Branches                 2433     2433           
===================================================
  Hits                     9477     9477           
  Misses                   3288     3288           
  Partials                  163      163

Impacted Files	Coverage Δ
packages/interactions/src/Interactions.ts	`94.23% <ø> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 46770e9...212d4a5. Read the comment docs.

ashika01

Some nits / non blocking suggestions.

packages/amplify-ui-components/src/common/audio-control/helper.ts

packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx

ashika01 · 2020-08-24T20:51:04Z

packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx

+  /**
+   * Interactions helpers
+   */
+  private async sendTextMessage() {


Could we not move this to a separate interactions-helpers

hmmmm that's a good idea; I thought about it too, but I decided not to for now because both sendText and sendVoice have setState logic throughout them. I'll see how interactions-helpers would look after the preview release.

packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx

packages/amplify-ui-components/src/common/audio-control/recorder.ts

ashika01 · 2020-08-24T21:02:26Z

@wlee221 Looks awesome 👏 Great work 🎉 🌮 Wondering if you already tested this cross browsers to see how UI is rendered and if all functionalities work across different browsers.?

Co-authored-by: Ashika <35131273+ashika01@users.noreply.github.com>

lgtm-com · 2020-08-24T21:58:34Z

This pull request introduces 1 alert and fixes 1 when merging 0acd8f8 into 00d5e17 - view on LGTM.com

new alerts:

1 for Unused variable, import, function or class

fixed alerts:

1 for Unused variable, import, function or class

…s-amplify/amplify-js into ui-components/chatbot-staging

wlee221 · 2020-08-24T22:35:31Z

@wlee221 Looks awesome 👏 Great work 🎉 🌮 Wondering if you already tested this cross browsers to see how UI is rendered and if all functionalities work across different browsers.?

Thanks Ashika! I tested this on Firefox / Chrome with React and Vue. I'll test for Angular and safari.

lgtm-com · 2020-08-24T22:40:05Z

This pull request introduces 1 alert and fixes 1 when merging 378e921 into 00d5e17 - view on LGTM.com

new alerts:

1 for Unused variable, import, function or class

fixed alerts:

1 for Unused variable, import, function or class

wlee221 · 2020-08-24T22:48:53Z

Just tested for safari and it doesn't support promise based decodeAudioData, so I had to use the callback based one. Tested across chrome / safari / firefox and looks good! I'll get it merged if the test passes.

lgtm-com · 2020-08-24T22:53:49Z

This pull request introduces 1 alert and fixes 1 when merging 212d4a5 into 46770e9 - view on LGTM.com

new alerts:

1 for Unused variable, import, function or class

fixed alerts:

1 for Unused variable, import, function or class

github-actions · 2021-08-25T00:09:08Z

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

wlee221 added 16 commits August 3, 2020 18:39

amplify-chatbot initial import

c9a6600

Use interface and comment out test

cc5d16b

Merge remote-tracking branch 'upstream/main' into ui-components/chatbot

c6e33e1

Expose additional css variables and add icon variant to button

1434414

Merge remote-tracking branch 'upstream/main' into ui-components/chatbot

a2c5396

Update snapshot

49f7e36

Clean up code

6c35728

Remove unused test case

bd8a99c

Add snapshot testing

5f404e8

Apply comments from @ashika01

b09348f

Rename --icon-color to --icon-fill

a865263

Remove unused class css

82155ff

Update css for compatibility with existing components

d504ff8

Set default height

e686aa3

Integrate Interactions text message

dc4dbb1

Update snapshots

2a8d052

wlee221 changed the title ~~Ui components/chatbot staging~~ Integrate chatbot with interactions Aug 12, 2020

Simplify code

0189195

wlee221 added 6 commits August 13, 2020 12:04

Add audiorecorder and integrate voice chat

5d8e16c

Use interface over type

7aadabc

Reorder functions and add byte descriptions

1a07f47

Add loading animation

346a4cc

Update interaction types

7b0e4cb

Scroll to bottom

9e9163f

wlee221 mentioned this pull request Aug 17, 2020

refactor(@aws-amplify/core): Rewrite aws-lex-audio.js and centralize it at core #6546

Closed

wlee221 added 4 commits August 17, 2020 15:53

set methods private

655761c

Rename css class

7d03591

Update snapshot

f59e7ea

Add error handling and reorder functions

52e73ee

ashika01 reviewed Aug 24, 2020

View reviewed changes

Update packages/amplify-ui-components/src/common/audio-control/helper.ts

0acd8f8

Co-authored-by: Ashika <35131273+ashika01@users.noreply.github.com>

wlee221 added 6 commits August 24, 2020 15:02

Move error strings to translations

3d058f6

Remove trailing comma

bd8d6dd

Wrap audioContext resume with error logger

cf3ef0f

Try catch resume and make startRecording async

c073c3f

Merge branch 'ui-components/chatbot-staging' of https://github.com/aw…

a59bbf9

…s-amplify/amplify-js into ui-components/chatbot-staging

Merge branch 'main' into ui-components/chatbot-staging

378e921

Use callback based decode for safari

212d4a5

wlee221 merged commit 7f2381f into ui-components/main Aug 24, 2020

wlee221 changed the title ~~Integrate chatbot with interactions~~ feat(@aws-amplify/ui-components): Add ChatBot Component Aug 24, 2020

github-actions bot locked as resolved and limited conversation to collaborators Aug 25, 2021

Conversation

wlee221 commented Aug 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Aug 12, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ashika01 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ashika01 Aug 24, 2020

Choose a reason for hiding this comment

Uh oh!

wlee221 Aug 24, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ashika01 commented Aug 24, 2020

Uh oh!

lgtm-com bot commented Aug 24, 2020

Uh oh!

wlee221 commented Aug 24, 2020

Uh oh!

lgtm-com bot commented Aug 24, 2020

Uh oh!

wlee221 commented Aug 24, 2020

Uh oh!

lgtm-com bot commented Aug 24, 2020

Uh oh!

github-actions bot commented Aug 25, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wlee221 commented Aug 12, 2020 •

edited

Loading

codecov bot commented Aug 12, 2020 •

edited

Loading